Angular Routing and Navigation

The term routing in angular means, navigating between different views or pages. Usually, the view or page will be the component's template. When clicking on the link we would redirect to the component.

Let's create an application and see with an example.

ng new angular-routing

Once the application has been created click on app-routing.module.ts file. This will show us the default code.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

To use routing, we need RouterModule and Routes which is imported from @angular/router. All the routes should be specified in the Routes array. Then we need to add it to the import array with RouterModule.forRoot(routes) and export the RouterModule.

Open the app.component.html file and modify the code as below.

<h1>Readers Buddy - Angular routing tutorial</h1>
<router-outlet></router-outlet>

Create a component named WelcomeComponent

Now, open the terminal and execute the angular command to create a component.

ng g c welcome

Open the welcome.component.ts file and modify the code as below.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent implements OnInit {
  title = 'Readers Buddy';
  constructor() { }

  ngOnInit() {
  }
}

Open the welcome.component.html file and modify the code as below.

<p>Welcome to {{title}}</p>

Create a component named HomeComponent

Then create another component named HomeComponent by entering the following angular cli command.

ng g c home

Open the home.component.ts file and modify the code as

<h3>Welcome to home page</h3>

Setup routes

Now let's add routing for this welcome component in app-routing.module.ts.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { WelcomeComponent } from './welcome/welcome.component';
import { HomeComponent } from './home/home.component';


const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'welcome', component: WelcomeComponent },
  { path: 'home', component: HomeComponent },
  { path: '**', redirectTo: '/home' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

In the above code, we have 4 routes. To load the HomeComponent as default page set the route as mentioned below

{ path: '', redirectTo: '/home', pathMatch: 'full' }

This will search for path home and loads the HomeComponent.

Similarly, when the path is http://localhost:4200/welcome it will load the WelcomeComponent. If no route is matched, then it will be handled by wildcard route specified by **, which will redirect to path home which would load the HomeComponent.

Import AppRoutingModule to AppModule

Import the AppRoutingModule in the app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { WelcomeComponent } from './welcome/welcome.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    WelcomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
	],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Set router link in app.component.html

Open the app.component.html file and modify the code as below.

<h1>Readers Buddy - Angular Routing tutorial</h1>
<p>
  <a [routerLink]="['/home']">Home</a> 
  <a [routerLink]="['/welcome']">Greet</a> 
</p>
<router-outlet></router-outlet>

To direct to a page we use routerLink and mention the route path mentioned in the routes. Then the component will be loaded in router-outlet element provided by angular.

Run the project

Run the app using

ng serve --o

Output